<template>
	<div class="container">
		<div class="up-container">
			<div class="avatar-compose">
				<img class="avatar" src="../assets/images/avatar.png">
				<img class="avatar-tag" src="../assets/images/tag.png" alt="">
				<div class="avatar-seat"></div>
			</div>
			<div>
				<div class="user-info" >
					<a class="user-name" href="">萌萌哒丶冬冬</a>
					<span class="icon-sex"></span>
					<span class="icon-level"></span>
					<a class="year-vip">年度大会员</a>
				</div>
				<div style="margin-top:5px;">
					<span class="blog-txt">个人博客：blog.wanderdong.cn</span>
				</div>
				<div style="margin-top:5px;">
					<span class="sig-txt">Bilibili个人认证：老哥传火嘛？</span>
				</div>
			</div>
		</div>
		<div class="middle-container">
			<button class="btn-focus">
				<a style="color: white" href="https://space.bilibili.com/10836032" target="_blank">来B站关注我！</a>
			</button>
		</div>
		<div class="bottom-container">
			<div class="user-article">
				<p class="article-number">202</p>
				<p class="article-txt">关注数</p>
			</div>
			<div class="user-article">
				<p class="article-number">105</p>
				<p class="article-txt">粉丝</p>
			</div>
			<div class="user-article">
				<p class="article-number">1012</p>
				<p class="article-txt">播放量</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name: "BilibiliCard"
	}
</script>

<style scoped>
.container{
	background-color: #fff;
	border-radius: 10px;
	width: 100%;
}

.up-container{
	display: flex;
	position: relative;
	padding-top: 20px;
}

.middle-container{
	margin-top:15px;
	text-align: center;
}

.bottom-container{
	margin-top: 15px;
	text-align: center;
	width: 100%;
	height: 60px;
	background-color: #fff;
	border-radius: 10px;
}

.avatar-compose{
	margin-top:-10px;
}

.avatar{
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	margin-top: 20px;
	margin-left: 20px;
}

.avatar-tag{
	position: absolute;
	width: 100px;
	height: 100px;
}

.avatar-seat{
	position: relative;
	margin-left: 20px;
	height: 65px;
	width: 60px;
	background-color: #fff;
	z-index: -2;
}

.user-name{
	color: #fb7299;
	font-size: 14px;
	font-weight: blod;
	vertical-align: top;
}

.icon-sex{
	display: inline-block;
	width: 25px;
	height: 20px;
	background-image: url('../assets/images/icons.png');
	background-position: -209px -471px;
}

.icon-level{
	margin-left: 5px;
	display: inline-block;
	width: 30px;
	height: 20px;
	background-image: url('../assets/images/level.png');
	background-position: -20px -189px;
}

.year-vip{
	margin-left: 5px;
	font-size: 14px;
	vertical-align: top;
	color: white;
	background-color: #f45a8d;
	border-radius: 5px;
	padding: 1px;
}

.blog-txt{
	margin-left: 10px;
	color: #999999;
	font-size: 14px;
}

.sig-txt{
	margin-left: 10px;
	font-size: 14px;
	font-weight: blod;
}

.btn-focus{
	width: 75%;
	padding: 5px;
	text-align: center;
	color: white;
	background-color: #00a1d6;
	border: 0px;
	border-radius: 2px;
	font-size: 16px;
	font-weight: 400;
}
 
.user-article{
	width: 33.3%;
	float: left;
}

.article-number{
	color: #2d8cf0;
	font-size: 16px;
	font-weight: bold;
}

.article-txt{
	font-size: 16px;
}

</style>